<template>
  <div>
    <div class="container-menu" v-loading="loading">
      <!-- <div v-if="mapLevel != '1'" class="goback" @click="goback()">
        返回上一级
      </div> -->
      <div class="btn-menu">
        <el-button v-for="(item, index) in btnMenu" :key="index" :class="{ on: item.isActive }"
          @click="switchTab(item)">
          {{ item.text }}
        </el-button>
      </div>
      <div class="right_tab">
        <!-- <el-button :style="{ display: rightTabDis }" v-for="(item, index) in btnMenuRight" :key="index"
          :class="{ on: item.isActive }" @click="switchRightTab(item)">
          {{ item.text }}
        </el-button> -->
        <!-- <el-date-picker  @change = timePickerEvt v-model="date1" type="date" placeholder="选择日期">
        </el-date-picker> -->
      </div>
    </div>
    <transition name="fade">
      <component :key="compKey" :is="myComponent" @home-reload="reload" :subComp="subComp"></component>
    </transition>
    <!--    <router-view></router-view>-->
  </div>
</template>

<script>
import balance from "@/views/home/balance";
import resource from "@/views/home/resource";
import business from "@/views/home/business";
import policy from "@/views/home/policy";
export default {
  name: "Home",
  components: {
    balance,
    resource,
    business,
    policy
  },
  data() {
    return {
      PAGETYPE: this.getCookie("PAGETYPE"),
      loading: false,
      btnMenu: [
        { name: "balance", text: "平衡分析", isActive: true },
        { name: "resource", text: "调节资源", isActive: false },
        { name: "business", text: "业务流程", isActive: false },
      ],
      btnMenuRight: [
        { id: "nowday", text: "日内", isActive: false },
        { id: "yesterday", text: "日前", isActive: true },
      ],
      btnMenuRight0: [
        { id: "nowday", text: "日内", isActive: false },
        { id: "yesterday", text: "日前", isActive: true },
      ],

      btnMenuRight2: [
        { id: "nowday", text: "地区风险分析", isActive: false },
        { id: "yesterday", text: "省调需求响应", isActive: true },
      ],
      rightTabDis: "inline-block",
      myComponent: "balance",
      compKey: Date.now(),
      date1: new Date(),
      subComp: undefined,
    };
  },


  computed: {
    mapLevel: {
      get() {
        return this.$store.state.home.mapLevel;
      },
      set(val) {
        if (val == "1") {
          this.$store.commit("home/setMapLevel", val);
          this.$store.commit("home/setMapName", "江苏省");
          this.$store.commit("home/setMapCity", "jiangsu");
        }
      },
    },
  },
  methods: {
    getCookie(name) {
      const value = `; ${document.cookie}`;
      const parts = value.split(`; ${name}=`);
      if (parts.length === 2) return parts.pop().split(";").shift();
    },

    getPageTypeFromOpenedWindow() {
      // 使用 URLSearchParams 获取参数
      const urlParams = new URLSearchParams(window.location.search);
      const PAGETYPE = urlParams.get("PAGETYPE");
      // 如果找到 PAGETYPE 参数，则转换为数字类型并返回
      if (PAGETYPE !== null) {
        return parseInt(PAGETYPE, 10);
      }
      // 如果未找到 PAGETYPE 参数，返回 null
      return null;
    },

    initPage() {
      // alert()

      // if(sessionStorage.getItem('PAGETYPE')){
      this.PAGETYPE = this.getPageTypeFromOpenedWindow() || 1
      // }

      if (this.PAGETYPE == 1) {
        this.myComponent = "balance",
          this.btnMenu.forEach(it => {
            it.isActive = false
            if (it.text == '平衡分析') {
              it.isActive = true
            }
          })
      } else if (this.PAGETYPE == 2) {
        this.myComponent = "resource",
          this.btnMenu.forEach(it => {
            it.isActive = false
            if (it.text == '调节资源') {

              it.isActive = true
            }
          })
      } else {
        this.myComponent = "business",

          this.btnMenu.forEach(it => {
            it.isActive = false
            if (it.text == '业务流程') {
              it.isActive = true
            }
          })
      }
    },

    getOne() {
      // 在这里编写获取数据的逻辑
      console.log("获取数据");
    },
    handleStorageChange(event) {
      if (event.key === "changeTime") {
        const currentChangeTime = sessionStorage.getItem("changeTime");
        if (currentChangeTime !== event.oldValue) {
          this.getOne();
        }
      }
    },

    // 格式化时间的方法
    formatDate(dateString) {
      const date = new Date(dateString);
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(
        2,
        "0"
      )}-${String(date.getDate()).padStart(2, "0")}`;
    },
    timePickerEvt(v) {
      let myTime = this.formatDate(v);
      console.log(myTime, "v,看一眼v的数据");
      sessionStorage.setItem("changeTime", JSON.stringify(myTime));
    },

    switchTab(item) {
      if (!item.isActive) {
        this.btnMenu.forEach((obj) => {
          obj.isActive = false;
        });
        item.isActive = true;
        if (item.name == "balance") {
          sessionStorage.setItem('resouse_PageType', '2')
          this.rightTabDis = "inline-block";
          this.btnMenuRight = this.btnMenuRight0
          // this.btnMenuRight = this.btnMenuRight2
        } else if (item.name == "business") {

          let resouse_PageType = sessionStorage.getItem('resouse_PageType')
          if (resouse_PageType == '2') return


          this.btnMenuRight = this.btnMenuRight2
          this.rightTabDis = "inline-block";
        } else {

          this.rightTabDis = "none";
        }
        this.myComponent = item.name;
        this.subComp = undefined;
        //this.$router.push('/'+item.name);
      }
    },
    switchRightTab(item) {

      // console.log(item,'999');
      if (item.text == '日前' || item.text == '日内') {

        if (!item.isActive) {
          this.btnMenuRight.forEach((obj) => {
            obj.isActive = false;
          });
          item.isActive = true;
          this.compKey = Date.now();
          this.$store.commit("home/setRiNeiOrQian", item.id);
          console.log(item, "time");
        }

      } else {
        // this.$emit("business-city-reload", "shengdiao");

        this.$root.$emit('business-city-reload', "shengdiao")

        // alert('shiji')

      }

    },
    goback() {
      this.mapLevel = "1";
      this.compKey = Date.now();
    },
    reload(menu, subMenu) {

      // alert('世界')
      for (let i = 0; i < this.btnMenu.length; i++) {
        if (menu == this.btnMenu[i].name) {
          this.btnMenu[i].isActive = true;
        } else {
          this.btnMenu[i].isActive = false;
        }
      }
      this.compKey = Date.now();
      if (menu == "balance") {
        this.rightTabDis = "inline-block";
      } else {
        this.rightTabDis = "none";
      }
      this.myComponent = menu;
      this.subComp = subMenu;
    },
  },

  created() {
    // sessionStorage.setItem("PAGETYPE",1)

    sessionStorage.setItem('resouse_PageType', '2')
    this.initPage()
  },

  mounted() {
    window.addEventListener("storage", this.handleStorageChange);
  },
  beforeUnmount() {
    window.removeEventListener("storage", this.handleStorageChange);
  },
};
</script>

<style lang="scss" scoped>
.container-menu {
  width: 100%;
  height: 52px;
  background: url(../../assets/images/headLine.png) no-repeat center;
  position: relative;

  .goback {
    position: absolute;
    left: 20px;
    top: -5px;
    width: 200px;
    height: 25px;
    line-height: 28px;
    padding-left: 30px;
    color: #27afd3;
    font-size: 18px;
    font-weight: bold;
    background: url("../../assets/images/goback.png") left center no-repeat;
    background-size: 25px 25px;
    cursor: pointer;
  }

  .btn-menu {
    width: 427px;
    margin: 0 auto;

    .el-button {
      width: 142px;
      height: 43px;
      border: none;
      font-size: 20px;
      text-align: center;
      line-height: 43px;
      padding: 0;
      margin: 0;
      font-weight: bold;
      background: url(../../assets/images/views/home/rihjtNav.png) no-repeat center;

      &:hover,
      &:focus,
      &.on {
        color: #fff;
        background: url(../../assets/images/views/home/rihjtNavHover.png) no-repeat center;
      }
    }
  }

  /*.menuSelected{
    color: #fff !important;
    background: url(../../assets/images/views/home/rihjtNavHover.png)
    no-repeat center !important;
  }*/
  .right_tab {
    position: absolute;
    right: 240px;
    top: -7px;

    .el-button {
      width: 110px;
      height: 33px;
      padding: 0;
      border: none;
      margin: 0;
      background: url(../../assets/images/views/home/TabNav.png) no-repeat center;

      &:hover,
      &:focus,
      &.on {
        background: url(../../assets/images/views/home/TabNavHover.png) no-repeat center;
        color: #444;
      }
    }

    .el-date-editor {
      width: 120px;
      height: 28px;
      border: 1px solid #82cbbe;
      bottom: -2px;
      margin-left: 10px;
      border-radius: 4px;

      ::v-deep .el-input__inner {
        border: none;
        padding-left: 10px;
        height: 26px;
        font-weight: bold;
      }

      ::v-deep .el-input__prefix {
        left: auto;
        font-size: 18px;
        right: 5px;
        color: #3f8d94;

        .el-input__icon {
          font-weight: bold;
        }
      }
    }
  }
}
</style>
